<template>
  <a-popover
    v-model="visible"
    trigger="click"
    placement="bottomRight"
    overlayClassName="header-notice-wrapper"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    :overlayStyle="{ width: '300px', top: '50px' }"
  >
    <template slot="content">
      <detail-list title="您的账号信息" :col="1">
        <detail-list-item term="登录账号">{{ name }}</detail-list-item>
        <detail-list-item term="所属部门">{{ dept.name }}</detail-list-item>
        <detail-list-item term="账号类型">{{ root ? '超级管理员' : '普通账号' }}</detail-list-item>
        <detail-list-item term="所属角色">
          <a-tag color="cyan">{{ root ? '超级管理员' : role.name }}</a-tag>
        </detail-list-item>
        <detail-list-item term="数据权限">
          <a-tag color="cyan">{{ root ? '全部数据' : dataScopeMap[parseInt(role.dataScope)] }}</a-tag>
        </detail-list-item>
      </detail-list>
    </template>
    <span @click="toggle" class="header-notice">
      <a-icon style="font-size: 16px; padding: 4px" type="user" />
    </span>
  </a-popover>
</template>

<script>
import { mapGetters } from 'vuex'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

export default {
  name: 'AccountInfo',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      visible: false

    }
  },
  computed: {
    ...mapGetters(['name', 'nick', 'root', 'dept', 'role','dataScopeMap'])
  },
  methods: {
    toggle () {
      this.visible = !this.visible
    }
  }
}
</script>

<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  .header-notice{
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }
</style>
